<template>
  <text v-if="type==='text'" class="reply-user-name" @click.stop="handleClickText">{{textValue}}</text>
  <view v-else :class="{big: size === 'big', normal: size === 'normal', small: size === 'small'}">
    {{textValue}}
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  props: {
    type: {
      type: String,
      default: 'view', // view、text
    },
    userID: {
      type: String,
      default: null
    },
    size: {
      type: String,
      default: 'normal', // big、noraml、small
    },
    text: {
      type: String,
      default: ''
    },
    tag: {
      type: String,
      default: ''
    },
  },
  data: () => ({
  }),
  computed: {
    ...mapState({
      umsMember: state => state.app.umsMember,
    }),
    textValue() {
      const { text, userID, umsMember, tag } = this;
      const { id, nickname } = umsMember || {};
      if (id && userID && id + '' === userID + '') {
        // console.log('umsMember', userID, nickname, umsMember);
        return (nickname || text) + tag;
      }
      return text + tag;
    },
  },
  methods: {
    handleClickText() {
      // console.log('handleClickText');
      this.$emit('click');
    }
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {},
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
};
</script>

<style scoped lang="less">
.reply-user-name {
  font-family: PingFangSC-Regular;
  font-size: 26rpx;
  color: #3470FF;
  line-height: 24rpx;
  // white-space: nowrap;
  margin-right: 8rpx;
  &:active {
    opacity: 0.8;
  }
}
.big {
  font-family: PingFangSC-Semibold;
  font-size: 36rpx;
  color: #1A1A1A;
  // line-height: 36rpx;
  text-overflow: ellipsis;
  max-width: calc(100vw - 60rpx - 120rpx - 130rpx);
  white-space: nowrap;
  overflow: hidden;
  font-weight: bold;
}
.normal {
  font-family: PingFangSC-Semibold;
  font-weight: bold;
  font-size: 28rpx;
  color: #1A1A1A;
  // line-height: 28rpx;
  text-overflow: ellipsis;
  max-width: calc(100vw - 60rpx - 80rpx - 130rpx);
  white-space: nowrap;
  overflow: hidden;
}
.small {
  font-family: PingFangSC-Semibold;
  font-size: 26rpx;
  color: #1A1A1A;
  // line-height: 26rpx;
  text-overflow: ellipsis;
  max-width: calc(100vw - 60rpx - 80rpx - 130rpx);
  white-space: nowrap;
  overflow: hidden;
}
</style>
